<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>{{info.name}}</title>
    <link rel="stylesheet" href="/static/special/css/mescroll.min.css">
	    <link rel="stylesheet" href="/static/special/css/main.css">
	    <style>
		.pay{
		    border-radius: 0.08rem;
		    display: block;
		    background: rgb(246, 65, 65);
		    width: 1.48rem;
		    height: 0.6rem;
		    margin-top:-0.6rem;
		    font-family: PingFang-SC-Regular;
		    color: rgb(255, 255, 255);
		    font-size: 0.28rem;
		    letter-spacing: 0.015rem;
		    text-align: center;
		    text-decoration: none;
		    position: relative;
		    line-height: 0.6rem;
		}
		.title{
		   font-family:PingFangSC-Semibold;
		   font-size:0.3rem;
		   color:#323232;
		   letter-spacing:0.016rem;
		   text-align:left;
		   line-height:0.34rem;
		   height:0.34rem;
		}
		.price{
		    width:2.02rem;
		}
		.newprice{
		    font-family:PingFangSC-Semibold;
		    font-size:0.36rem;
		    color:#f64141;
	            letter-spacing:0.0168rem;
	            text-align:left;
	            height:0.4rem;
	            line-height:0.4rem;
	            float:left;
		}
		.original {
		    font-family:PingFangSC-Light;
		   font-size:0.28rem;
	color:#848484;
	letter-spacing:0.0132rem;
	text-align:left;
	height:0.32rem;
	line-height:0.32rem;
	margin-left:0.2rem;
	float:left;
	margin-top:0.08rem
		}
		a:hover{
		    text-decoration: none;
		}
		.desc-title{
		    font-family:PingFangSC-Light;
font-size:0.28rem;
color:#848484;
letter-spacing:-0.0030rem;
text-align:left;
margin-bottom:0.28rem;
		}
		.desc-content {
		    font-family:PingFangSC-Light;
font-size:0.22rem;
color:#848484;
letter-spacing:-0.0042rem;
text-align:left;
line-height:0.28rem;
		}
	    </style>
	    <script>
		(function(designWidth, maxWidth) {
		var doc = document,
		win = window,
		docEl = doc.documentElement,
		remStyle = document.createElement("style"),
		tid;

		function refreshRem() {
			var width = docEl.getBoundingClientRect().width;
			maxWidth = maxWidth || 540;
			width>maxWidth && (width=maxWidth);
			var rem = width * 100 / designWidth;
			remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
		}

		if (docEl.firstElementChild) {
			docEl.firstElementChild.appendChild(remStyle);
		} else {
			var wrap = doc.createElement("div");
			wrap.appendChild(remStyle);
			doc.write(wrap.innerHTML);
			wrap = null;
		}
		//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
		refreshRem();

		win.addEventListener("resize", function() {
			clearTimeout(tid); //防止执行两次
			tid = setTimeout(refreshRem, 300);
		}, false);

		win.addEventListener("pageshow", function(e) {
			if (e.persisted) { // 浏览器后退的时候重新计算
				clearTimeout(tid);
				tid = setTimeout(refreshRem, 300);
			}
		}, false);

		if (doc.readyState === "complete") {
			doc.body.style.fontSize = "16px";
		} else {
			doc.addEventListener("DOMContentLoaded", function(e) {
				doc.body.style.fontSize = "16px";
			}, false);
		}
	})(750, 750);
	   </script>

	</head>

	<body style="font: 12px/1.5 tahoma,arial;position: absolute">
	    <div id="app" class="" style='background:{{info.color}}'>
		<div id="mescroll" class="mescroll">
		    <header style="height:6rem;width:7.5rem;margin:0 auto;">
			<img src='{{info.url}}' style="height:6rem;width:7.5rem"></img>
		    </header>
		    <section class="content" style="width:7.5rem;background:{{info.color}};margin:0 auto;">
			<div style="width:7.02rem;margin: 0 auto;">
			    <ul class="content-items" style="background: #ffffff;clear: both;width:7.02rem;margin: 0 auto;">
				{%if info.gdata|length == 0%}
				<div style="text-align:center;">本专题还没有商品</div>
				{%endif%}
				{%for item in info.gdata%}
				<li class="item clear" style="padding: 0.26rem 0.24rem {%if loop.last%}0.24rem 0.24rem;height:2.76rem;{%else%}0.14rem 0.24rem;height:2.66rem;{%endif%} margin-bottom:0;" >
				    <div style="float: left;height:2.26rem;" attr-id='{{item.id}}' onclick='ahref(this)'>
					<img src="{{item.img}}" alt="{{item.name_full}}" style="width:2.26rem;height:2.26rem;">
				    </div>

				    <div class="" style="float: left;margin-left:0.22rem;height:2.26rem">
					<h6 class="title" data-name="{{item.name_full}}" >{{item.name}}</h6>
					<div class="address" style="height:0.32rem;line-height: 0.32rem;font-size: 0.24rem;margin-top:0.28rem;">
					    <img src="/uploads/2018010409464893590.png" style="height:0.32rem;0.32rem;padding-right: 0.26rem;float:left;">
					    <div style="float:left;color:#7f7e7d;width:2.96rem;">{{item.address}}</div>
					</div>
					<div class="address" style="height:0.38rem;line-height: 0.38rem;font-size:0.22rem;margin-top:0.14rem;">
					    <img src="/uploads/2018011113130421140.png" style="height:0.38rem;width:0.38rem;padding-right: 0.20rem;float:left;">
					    <div style="float:left;color:#7f7e7d;width:2.96rem;">已售{{item.goods_sold}}个</div>
					</div>
					<div class="price" style="margin-top:0.40rem;float:left;height:0.4rem;width:2.42rem;">
					    <div class="newprice">¥{{item.sale_price}}</div>
					    {%if item.sale_price|length <= 4%}
					    <del class="original" >¥{{item.price}}</del>
					    {%endif%}
					</div>
				    </div>
				    <div style="float: right;clear: both;overflow: visible">
						<a class="pay" data-id="{{item.id}}" onclick="buy(this)">
							立刻购买
						</a>
				    </div>
				</li>
				{%endfor%}
			    </ul>
			    <div style="background:#f6f6f6;padding:0.3rem 0.18rem 0.3rem 0.24rem;">
				<div class="desc-title">活动说明：</div>
				<div class="desc-content">{{info.content}}</div>
			    </div>
			</div>
		    </section>
		</div>
	    </div>
	    <script type="text/javascript" src="/static/common/js/jquery-1.11.2.min.js"></script>
	    <script type="text/javascript" src="/static/common/js/jockey.min.js"></script>
	    <script>
		function buy (e){
		    var goodsid = $(e).attr('data-id');
		    var goodsName = $(e).parent().parent().find('h6').attr('data-name');
		    var goodsPrice =$(e).parent().parent().find('div.newprice').text().substring(1);
		    console.log(goodsPrice);
		    Jockey.send("pailexiong", {
			key: 'buy',
			data: {
			    'gid':goodsid.toString(),
			    'goodName':goodsName,
			    'sale_price':goodsPrice
			}
		    });
		}
	

		function ahref(obj) {
		    var gid = $(obj).attr('attr-id');
		    window.location.href = "https://clubbear.clubbear.cn/product/productDel.html?gid=" + gid;
		}
	    </script>
	</body>

</html>
